<template>
  <AppHeader title="重点词组归纳" :banAnimate="true">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="book-details">
    <div class="content">
      <div class="block block1">
        <div class="title">重点单词</div>
        <div class="list">
           <div class="item" v-for="i in 10" :key="i">
            1、<span>discover</span> v. 发现-discovery n. 发现discover v.
           </div>
        </div>
      </div>
      <div class="block block2">
        <div class="title">重点短语</div>
        <div class="list">
           <div class="item" v-for="i in 10" :key="i">
            6、交谈 <span>talk to</span> 
           </div>
        </div>
      </div>
      <div class="block block3">
        <div class="title">重点句型</div>
        <div class="list">
           <div class="item" v-for="i in 10" :key="i">
            1、尽量通过阅读前后句来猜测单词的意思。(UISA)
try to guess a word's meaning by reading the 
sentences before and after it.
           </div>
        </div>
      </div>
      
    </div>
    <div class="btn" @click="complete">
      <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">我读完了</van-button>
    </div>
  </div>

  <AppLoading v-if="loading.page" />
</template>
<script setup>
import { onMounted, reactive, toRefs, nextTick } from "vue";
import { useRouter } from "vue-router";
import { request } from "@/api/request";

import AppHeader from "@/components/AppHeader.vue";
import AppLoading from "@/components/AppLoading.vue";
const router = useRouter();
const state = reactive({
  loading: {
    page: false,
  },
  testList: [],
  mescrollInstance: null,
  mescrollConfig: {
    down: {
      use: true,
    },
    up: {
      auto: true,
      isBounce: false,
      noMoreSize: 4,
      htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
      callback: (page) => {
        fetchListData(page);
      },
    },
  },
});
const complete = () => { 
  router.push({
    path: "/writtenTest/completeTask"
  });
}
const onClickLeft = () => {
  router.go(-1);
}

const { loading, mescrollConfig,questionPopupShow } = toRefs(state);
</script>
<style scoped lang="scss">
.book-details{
  background: #f5f5f5;
  height: 100%;
  padding-top: 44px;
  padding-bottom: 20px;
  overflow: scroll;
  .content
  {padding: 10px;
  .block{
    .title{
      font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 22px;
text-align: left;
font-style: normal;
margin: 15px 0 10px;
    }
    .list{
      background: #FFFFFF;
border-radius: 15px;
padding: 10px;
.item{
  font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #8E8E8E;
line-height: 28px;
text-align: left;
font-style: normal;
span{
  color: #0CB76C;
}
}
    }


  }}
  .btn{ padding: 30px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;}
  }
</style>
